<template>
  <div class="index-container">
    <!-- 左侧导航 -->
    <div class="nav">
      <ul>
        <li v-for="navObj in navList"   :key="navObj.id">
          <router-link
          :to="navObj.path">
          {{navObj.name}}
          </router-link>
        </li>
      </ul>
    </div>
    <!-- 右侧的容器 -->
    <div class="main">
    <!-- 路由的出口，地址命中之后把组件显置   -->
      <router-view></router-view>
    </div>
    <div class="player">
      <!-- autoplay 自动播放 -->
      <audio :src='musicUrl' controls autoplay></audio>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      navList: [
        { id: 1, path: '/discovery', name: '发现音乐' },
        { id: 2, path: '/playlist', name: '推荐歌单' },
        { id: 3, path: '/songs', name: '最新音乐' },
        { id: 4, path: '/mvs', name: '最新MV' }
      ],
      // 播放歌曲地址
      musicUrl: 'http://m7.music.126.net/20200303182550/8aa5971b1630d1527a922ccd2b97f392/ymusic/035d/0109/520e/478f86cc9f6c6539f7c8ed3e06c1bf8e.mp3'
    }
  }
}
</script>
